<script setup lang="ts">
import HelloWorld from "@/components/HelloWorld.vue";
import HelloWorldNosetup from "@/components/HelloWorld-nosetup.vue";
import HelloWorldSlot from "@/components/HelloWorld-slot.vue";
import { ref } from "vue";
const msgFromChildSetup = ref("");
const getDataFromChildSetup = (params: string) => {
  console.log(params);
  msgFromChildSetup.value = params;
};
// const clickSlot = () => {

// }
</script>

<template>
  <router-view></router-view>
  <div v-if="false">
    <HelloWorldSlot #header>
      <p>
        我是父组件插槽
        <button type="button">点击</button>
      </p>
    </HelloWorldSlot>
    <p>
      {{ msgFromChildSetup }}
    </p>
    <HelloWorld
      params="Hello World"
      :list="[1, 2, 3, 4]"
      @parentClick="getDataFromChildSetup"
    />
    <HelloWorldNosetup paramsNosetup="Hello World no setup"></HelloWorldNosetup>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
